<template>
    <div>
        <h2>新增盘点</h2>
        <el-divider></el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-row :gutter="20">
                <el-col :span="8" :offset="4">
                    <el-form-item label="盘点单号" prop="CheckCode">
                        <el-input v-model="form.CheckCode" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="盘点类型" prop="CheckType">
                        <el-input v-model="form.CheckType"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" :offset="4"><el-form-item label="制单人" prop="CreatOr">
                        <el-input v-model="form.CreatOr"></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="备注" prop="Remarks">
                        <el-input type="textarea" v-model="form.Remarks" :rows="2" placeholder="请输入内容">
                        </el-input>
                    </el-form-item></el-col>
            </el-row>

        </el-form>
        <h3 class="dot">产品信息</h3>
        <div class="eto">
            <el-button type="primary" @click="productShow">新增产品</el-button>
        </div>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible" width="60%">
            <div>
                产品编号:<el-input v-model="ProductCode" style="width: 200px"></el-input>
                产品名称:<el-input v-model="ProductName" style="width: 200px"></el-input>
                类型:<el-select v-model="ProductTypeId" placeholder="请选择">
                    <el-option :value="0" label="请选择">请选择 </el-option>
                    <el-option :value="1" label="移动电源">移动电源 </el-option>
                    <el-option :value="2" label="线材类">线材类 </el-option>
                </el-select>
                <el-button type="primary" @click="ProductManagementGetList()">查询</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="productCode" label="产品编号"> </el-table-column>
                <el-table-column prop="productName" label="产品名称"> </el-table-column>
                <el-table-column prop="specs" label="规格"> </el-table-column>
                <el-table-column prop="productTypeId" label="类别">
                    <template slot-scope="data">
                        <span v-if="data.row.productTypeId == 1">移动电源</span>
                        <span v-if="data.row.productTypeId == 2">线材类</span>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="存储单位"> </el-table-column>
                <el-table-column prop="inventory" label="库存数"> </el-table-column>
                <el-table-column prop="packageType" label="包装类型"> </el-table-column>
                <el-table-column prop="price" label="价格"> </el-table-column>
                <el-table-column prop="weight" label="重量"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <br />
            <div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageIndex" :page-sizes="[2, 3, 6, 10]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="yesshow">确 定</el-button>
            </div>
        </el-dialog>


        <template>
            <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChanges">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="productCode" label="产品编码">
                </el-table-column>
                <el-table-column prop="specs" label="规格">
                </el-table-column>
                <el-table-column prop="batch" label="批次">
                    <template slot-scope="sc">
                        <el-input v-model="sc.row.batch" style="width: 100px"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="库位">
                </el-table-column>
                <el-table-column prop="inventory" label="库存">
                </el-table-column>
                <el-table-column prop="checkNumber" label="盘点数">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.checkNumber" :min="1" :max="scope.row.inventory"
                            label="盘点数"></el-input-number>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <div class="xxx">
            <el-button type="primary" @click="submitForm('ruleForm')">编辑</el-button>
            <el-button @click="Cancel">返回</el-button>
        </div>

    </div>
</template>
<script>
import { ReckCheck, UpdateCheckDetail, UpdateCheck } from '@/api/WarehouseServer/checkServer';
import {
    ProductManagementGetList,
} from "@/api/BasicsDatumServer/ProductManagement";
export default {
    //数据
    data() {
        return {
            form: {
                id: "",
                CheckCode: "",
                CheckType: "",
                CreatOr: "",
                Remarks: "",
                state: "",
                creatOrTime: "",
            },
            rules: {},
            //包含批次、盘点数
            ProductManagementDtolist: [],
            dialogTableVisible: false,
            productlist: [],
            //产品表数据
            tableData: [],
            ProductCode: "",
            ProductName: "",
            ProductTypeId: 0,
            pageIndex: 1,
            pageSize: 2,
            totalCount: 0,
            pageCount: 0,
            multipleSelection: [],
        }
    },
    //方法
    methods: {

        //反填
        ReckCheck() {
            //console.log(this.$route.query.id);
            var myparam = {
                checkCode: this.$route.query.id,
            }
            ReckCheck(myparam).then((res) => {
                this.form = {
                    id: res.data.id,
                    CheckCode: res.data.checkCode,
                    CheckType: res.data.checkType,
                    CreatOr: res.data.creatOr,
                    Remarks: res.data.remarks,
                    state: res.data.state,
                    creatOrTime: res.data.creatOrTime,
                };
                this.productlist = res.data.productManagementDto;
            });
        },
        //添加的多选
        handleSelectionChanges(val) {
            this.ProductManagementDtolist = val;
        },
        //取消
        Cancel() {
            this.$router.push("/WarehouseManage/ChecksManage/CheckList");
        },
        //修改
        submitForm() {
            if (this.ProductManagementDtolist.length == 0) {
                this.$message({
                    message: '请选择要导出的数据',
                    type: 'warning'
                });
                return;
            }

            var myparam = {
                id: this.form.id,
                CheckCode: this.form.CheckCode,
                CheckType: this.form.CheckType,
                CreatOr: this.form.CreatOr,
                Remarks: this.form.Remarks,
                state: this.form.state,
                creatOrTime: this.form.creatOrTime,
                productManagementDto: this.ProductManagementDtolist,
            }

            console.log(myparam);
            UpdateCheck(myparam).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.$router.push("/WarehouseManage/ChecksManage/CheckList");
                } else {
                    this.$message.error('修改失败');
                }
            })
        },
        //弹出层
        productShow() {
            this.dialogTableVisible = true;
            this.ProductManagementGetList();
        },
        //点击确定获取产品表数据
        yesshow() {
            this.productlist = this.multipleSelection;
            this.dialogTableVisible = false;
        },
        //获取产品列表多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //产品表
        ProductManagementGetList() {
            var params = {
                ProductCode: this.ProductCode,
                ProductName: this.ProductName,
                ProductTypeId: this.ProductTypeId,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            ProductManagementGetList(params).then((res) => {
                this.tableData = res.data.data.result;
                this.totalCount = res.data.data.totalCount;
                this.pageCount = res.data.data.pageCount;
            });
        },
        //产品分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.ProductManagementGetList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageIndex = val;
            this.ProductManagementGetList();
        },

    },
    mounted() {
        this.ReckCheck();
    },
}
</script>
<style>
.dot {
    text-align: left;
}

.eto {
    text-align: right;
}

.xxx {
    margin-top: 10px;
}
</style>